<template>
  <div class="Login04">
    <div class="tc">
      <!-- 左边 -->
      <div class="left">
        <div class="left_top">
          <div class="left_top_titlebox">
            <img src="../assets/icon/Frame@1x.png" alt="">
            <div class="title">
              <div class="title_text1">监控管理系统</div>
              <div class="title_text2">XXXsysteam</div>
            </div>
          </div>
        </div>
        <img class="img" src="../assets/icon/Vector.svg" alt="">
        <div class="left_bottom">监控管理系统</div>
        <div class="left_bottom2">XXXsysteam</div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="login">
          <div class="username">用户名</div>
          <div class="username_inpbox">
            <input type="text" name="" class="inp_name" placeholder="请输入用户名">
          </div>
          <div class="password">密码</div>
          <div class="password_inpbox">
            <input type="password" name="" class="inp_pass" placeholder="请输入密码">
          </div>
          <div class="logbtn">登录</div>
          <div class="cz">
            <div class="jzmmbox">
              <input type="checkbox" name="" class="">
              <div class="jzmm_title">记住密码</div>
            </div>
            <div class="wjmm">忘记密码？</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {

    };
  },
  mounted() {
    console.log(
      `%c 登录02 %c 202410231124  %c`,
      'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
      'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
      'background:transparent',
      23
    )
  },
  methods: {},
};
</script>
<style scoped>
.Login04 {
  width: 1920px;
  height: 1080px;
  background: url('../assets/img/登录04@1x.png') no-repeat 0 0/100% 100%;

  .tc {
    width: 1178px;
    height: 650px;
    background: #fff;
    position: fixed;
    top: 215px;
    left: 371px;
    display: flex;

    .left {
      width: 378px;
      height: 650px;
      background: #409EFF;

      .left_top {
        width: 378px;
        height: 80px;
        /* 自动布局 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* padding: 40px 0px 0px 0px; */
        gap: 12px;
        align-self: stretch;
        z-index: 0;

        .left_top_titlebox {
          display: flex;

          .title {
            margin-left: 12px;

            .title_text1 {
              font-size: 20px;
              font-weight: bold;
              line-height: 24px;
              display: flex;
              align-items: center;
              letter-spacing: 0px;
              /* 外部/全局/white */
              color: #FFFFFF;
            }

            .title_text2 {
              font-size: 10px;
              font-weight: normal;
              line-height: 16px;
              display: flex;
              align-items: center;
              letter-spacing: 0px;
              /* 外部/全局/white */
              color: #FFFFFF;
            }
          }
        }
      }

      .img {
        margin-top: 56px;
        margin-left: 10px;
      }

      .left_bottom {
        margin-left: 141px;
        width: 96px;
        height: 24px;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        /* 外部/background-base */
        color: #F5F7FA;
      }

      .left_bottom2 {
        margin-left: 161px;
        margin-top: 26px;
        width: 56px;
        height: 16px;
        font-size: 10px;
        font-weight: normal;
        line-height: 16px;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        /* 外部/全局/white */
        color: #FFFFFF;
      }
    }

    .right {
      width: 800px;
      height: 650px;

      .login {
        margin-top: 180px;
        margin-left: 203.75px;
        /* background: yellowgreen; */
        width: 392.15px;
        height: 290px;

        /* 用户名标题 */
        .username {
          font-size: 20px;
          font-weight: normal;
          line-height: 28px;
          color: #000000;
        }

        /* 输入框 */
        .username_inpbox {
          margin-top: 7px;
         
          .inp_name {
            outline: none;
            /* 取消轮廓 */
            border: none;
            /* 取消边框 */
            width: 368.51px;
            height: 40px;
            padding: 8px 12px;
            border-radius: 4px;
            opacity: 1;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 1px solid #DCDFE6;
          }
        }

        /* 密码标题 */
        .password {
          margin-top: 20px;
          font-size: 20px;
          font-weight: normal;
          line-height: 28px;
          color: #000000;
        }

        /* 密码盒子 */
        .password_inpbox {
          margin-top: 7px;

          .inp_pass {
            outline: none;
            /* 取消轮廓 */
            border: none;
            /* 取消边框 */
            width: 368.51px;
            height: 40px;
            padding: 8px 12px;
            border-radius: 4px;
            opacity: 1;
            background: #FFFFFF;
            box-sizing: border-box;
            border: 1px solid #DCDFE6;
          }
        }

        /* 登录按钮 */
        .logbtn {
          margin-top: 40px;
          width: 28px;
          height: 24px;
          padding: 8px 20px;
          border-radius: 4px;
          opacity: 1;
          background: #409EFF;
          font-size: 14px;
          font-weight: normal;
          line-height: 24px;
          text-align: center;
          letter-spacing: 0px;
          /* 全局/white */
          color: #FFFFFF;
        }

        /* 操作 */

        .cz {
          margin-top: 12px;
          width: 392.51px;
          height: 32px;
          /* 自动布局 */
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;


          /* 记住密码 */
          .jzmmbox {
            display: flex;

            input {
              width: 14px;
              height: 14px;
              margin-top: 5px;
            }

            .jzmm_title {
              margin-left: 8px;
              width: 56px;
              height: 24px;
              font-size: 14px;
              font-weight: normal;
              line-height: 24px;
              color: #606266;
            }
          }

          /* 忘记密码 */
          .wjmm {
            width: 70px;
            height: 24px;
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
            text-align: center;
            color: #409EFF;
          }
        }
      }
    }


  }
}
</style>